<template>
  <div class="container">
    <!-- 首页轮播展示 -->
    <van-swipe
      class="swipe-scale broadcast"
      :autoplay="8000"
    >
      <van-swipe-item
        v-for="(swipe, index) in broadcast"
        :key="index"
      >
        <router-link :to="swipe.weblink">
          <van-image
            :src="swipe.thumb"
            fit="cover"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
            <template v-slot:error>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 首页导航菜单 -->
    <van-grid
      square
      class="navigation"
    >
      <van-grid-item
        v-for="(cate,cid) in categories"
        :key="cid"
        :text="cate.title"
        :to="cate.weblink"
      >
        <template slot="icon">
          <van-image
            :src="cate.thumb"
            fit="contain"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
            <template v-slot:error>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 通知 -->
    <van-notice-bar
      :text="notice.text"
      :left-icon="notice.icon"
      class="noticebar"
      color="#ff6600"
      background="#fff"
      mode="link"
      v-if="notice"
      @click="pushWeblink(notice.link)"
    />

    <!-- 左右分栏 -->
    <scale-box
      class="mv-15"
      container-class="socrates clearfix"
      :ratio="7/5"
      v-if="sugergoods.length == 3"
    >
      <router-link
        class="socrates-item"
        v-for="(goods, index) in sugergoods"
        :key="index"
        :to="goods.weblink"
      >
        <van-image
          :src="goods.thumb"
          fit="cover"
        >
          <template v-slot:loading>
            <van-loading
              type="spinner"
              size="20"
            />
          </template>
          <template v-slot:error>
            <van-loading
              type="spinner"
              size="20"
            />
          </template>
        </van-image>
      </router-link>
    </scale-box>

    <!-- 推荐列表 -->
    <div
      class="boothstand"
      v-if="boothstand.length"
      v-for="(stand, sid) in boothstand"
      :key="sid"
    >

      <scale-box
        class="mv-15"
        container-class="socrates clearfix"
        :ratio="4/1"
        v-if="stand.advert"
      >
        <router-link :to="stand.advert.weblink">
          <van-image
            :src="stand.advert.thumb"
            fit="cover"
            style="background-color: #E8E0B9;"
          >
            <template v-slot:loading>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
            <template v-slot:error>
              <van-loading
                type="spinner"
                size="20"
              />
            </template>
          </van-image>
        </router-link>
      </scale-box>

      <dl class="mt10">
        <dt>
          <h1 class="cate-title">{{ stand.title }}</h1>
          <div v-if="stand.spread">
            <a
              @click="pushWeblink(stand.spread.link)"
              class="media-object"
            >
              <van-image
                :src="stand.spread.thumb"
                fit="cover"
                style="background-color: #E8E0B9;"
              >
                <template v-slot:loading>
                  <van-loading
                    type="spinner"
                    size="20"
                  />
                </template>
                <template v-slot:error>
                  <van-loading
                    type="spinner"
                    size="20"
                  />
                </template>
              </van-image>
              <div class="media-object-intros horizontal">
                <h3 class="goods-name">{{stand.spread.name}}</h3>
                <p class="goods-slogan">{{stand.spread.slogan}}</p>
                <h2 class="price price-cny">{{stand.spread.price}}</h2>
              </div>
            </a>
          </div>
        </dt>
        <dd :class="stand.format">
          <router-link
            :to="goods.link"
            class="media-object"
            v-for="(goods, index) in stand.products"
            :key="index"
          >
            <scale-box>
              <van-image
                :src="goods.thumb"
                fit="cover"
                style="background-color: #E8E0B9;"
              >
                <template v-slot:loading>
                  <van-loading
                    type="spinner"
                    size="20"
                  />
                </template>
                <template v-slot:error>
                  <van-loading
                    type="spinner"
                    size="20"
                  />
                </template>
              </van-image>
            </scale-box>
            <div class="media-object-intros">
              <h3 class="goods-name">{{goods.name}}</h3>
              <p class="goods-slogan">{{goods.description}}</p>
              <h2 class="price price-cny">{{goods.price}}</h2>
            </div>
          </router-link>
        </dd>
      </dl>
    </div>

  </div>
</template>

<script>
import ScaleBox from '@/components/scalebox'
// import ComponentName from '@/common/testcomp'
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Image,
  Loading,
  NoticeBar,
  GoodsAction
} from 'vant'
import assign from '@/mixins/assign.js'

export default {
  name: 'Homepage',
  components: {
    // ComponentName,
    ScaleBox,
    // [ScaleBox.name]: ScaleBox,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image,
    [Loading.name]: Loading,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [NoticeBar.name]: NoticeBar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction
  },
  mixins: [assign],
  inject: ['share'],
  data () {
    return {
      broadcast: [],
      categories: [],
      notice: false,
      sugergoods: [],
      boothstand: []
    }
  },
  created () {
    // this.onLoad()
  },
  mounted () {
    console.log('home mounted')
    this.onLoad()
    this.share({
      title: '优越定制',
      desc: '关注优越，定制您的美好生活，更多精彩尽在优越定制'
    })
  },
  methods: {
    onLoad () {
      this.$http.page.home().then(res => {
        // 获取数据成功后的其他操作
        let data = res.data
        console.log(data)
        this.broadcast = data.broadcast
        this.categories = data.navigation
        this.notice = data.notice
        this.sugergoods = data.socrates
        this.boothstand = data.boothstand
        // this.setSharePageData()
      })
    },

    setSharePageData () {
      let shareParams = {
        title: '优越定制',
        desc: '关注优越，定制您的美好生活，更多精彩尽在优越定制'
      }

      this.$store
        .dispatch('share/setData', shareParams)
        .then(res => {
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.home-recommend {
  padding-bottom: 50px;
}
.broadcast {
  .van-swipe-item /deep/ {
    &::before {
      padding-top: 60%;
    }
  }
}

.navigation {
  /deep/ .van-grid-item {
    &__icon-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-align: center;
      .van-image {
        height: 100%;
      }
    }
    &__text {
      margin-top: 5px;
      font-size: 10px;
      color: #8d8d8d;
      font-weight: 300;
    }
  }
}
.noticebar {
  /deep/ .van-notice-bar__left-icon {
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid #d7d7d7;
  }
  /deep/ .van-icon__image {
    width: auto;
    height: 0.9em;
  }
}
</style>
